.personal-details {
    width: 1000px;
    height: 100%;
    border-radius: 0px 30px 30px 0px;
    background-color: white;
    display: flex;
    flex-direction: column;
    .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 5%;
        padding-left: 10px;
        padding-right: 10px;
        .back {
            display: flex;
            width: 190.54px;
            height: 50px;
            align-items: center;
            justify-content: center;
            .back-icon {
                display: flex;
                width: 47.54px;
                height: 45.9px;
                justify-content: center;
                align-items: center;
                background: url('@/assets/personal/return.png');
                background-size: cover;
                margin-top: 14px;
            }
            .title {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 143px;
                height: 39px;
                font-size: 28px;
                font-weight: 700;
                color: rgb(121, 72, 234);
            }
        }
        .save{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 104.09px;
            height: 33.47px;
            background-color: rgb(154, 123, 240);
            color: white;
            border-radius: 9px;
            margin-right: 10px;
            .save-icon{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 48px;
                background: url('@/assets/personal/save-icon.png');
                background-size: cover;
            }
            .save-edit{
                width: 60px;
                height: 21px;
                font-size: 14px;
                font-weight: 400;
                color: white;
            }
        }
    }
    .content{
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 80%;
       align-items: center;
       .board{
          width: 917px;
          height: 286px;
          border-radius: 15px;
          box-shadow: -2px -2px 3px 2px rgb(215, 201, 249), 2px 2px 3px 2px rgb(215, 201, 249);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 30px;
          .details{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            .avartar{
                flex: 3;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .photo{
                    width: 200px;
                    height: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .photo-img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .photo-icon{
                    width: 50.51px;
                    height: 45.9px;
                    background: url('@/assets/personal/photo-icon.png');
                    background-size: cover;
                    margin-left: -60px;
                    margin-top: 166px;
                }
            }
            .detail{
                flex: 6;
                height: 80%;
                display: flex;
                flex-wrap: wrap;
                .detail-item{
                    display: flex;
                    box-sizing: border-box;
                    width: 50%;
                    flex-direction: column;
                    justify-content: center;
                    .title2{
                        display: flex;
                        width: 72px;
                        height: 28px;
                        color: rgb(128, 128, 128);
                        font-size: 18px;
                        font-weight: 500;
                        justify-content: center;
                        align-items: center;
                        margin-left: 40px;
                    }
                    .detail-info{
                        display: flex;
                        width: 215.25px;
                        height: 31.5px;
                        border-radius: 5px;
                        background-color: rgb(229, 229, 229);
                        margin-left: 40px;
                        margin-top: 5px;
                        align-items: center;
                        font-size: 18px;
                        font-weight: 300;
                        padding: 8px;
                    }
                }
            }
          }
          .contact {
              display: flex;
              flex-direction: column;
              width: 90%;
              height: 90%;
              padding: 5%;
              .title3 {
                  display: flex;
                  width: 80px;
                  height: 28px;
                  justify-content: center;
                  align-items: center;
                  font-size: 20px;
                  font-weight: 500;
                  color: rgb(56, 56, 56);
              }
            .content-2{
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                height: 90%;
                .content-item {
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    width: 50%;
                    justify-content: center;
                    .title4{
                        width: 72px;
                        height: 28px;
                        font-size: 18px;
                        font-weight: 500;
                        color: rgb(128, 128, 128);
                        margin-left: 24px;
                    }
                    .detail-info{
                        width: 263.25px;
                        height: 31.5px;
                        border-radius: 5px;
                        background-color: rgb(229, 229, 229);
                        font-size: 18px;
                        font-weight: 300;
                        padding-left: 10px;
                        margin-left: 24px;
                        display: flex;
                        align-items: center;
                        outline: none;
                    }
                    .eye-closed {
                        width: 36px;
                        height: 36px;
                        background: url('@/assets/personal/eye-closed.png');
                        background-size: cover;
                        margin-left: 255px;
                        margin-top: -35px;
                    }
                    .eye-open {
                        width: 36px;
                        height: 36px;
                        background: url('@/assets/personal/eye-open.png');
                        background-size: cover;
                        margin-left: 255px;
                        margin-top: -35px;
                    }
                    .safe-status{
                        width: 67.5px;
                        height: 42px;
                        background-color: rgb(122, 230, 165);
                        border-radius: 234px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-left: 10px;
                        padding-right: 12px;
                        margin-left: 20px;
                        .dot{
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            background-color: rgb(19, 168, 78);
                        }
                        .safe-text{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 40px;
                            height: 29px;
                            font-size: 18px;
                            font-weight: 300;
                        }
                    }
                    .unsafe-status{
                        width: 67.5px;
                        height: 31.5px;
                        background-color: rgb(230, 122, 122);
                        border-radius: 234px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-left: 10px;
                        padding-right: 12px;
                        margin-left: 20px;
                        .dot-unsafe{
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            background-color: rgb(168, 31, 19);
                        }
                        .safe-text{
                            width: 40px;
                            height: 29px;
                            font-size: 18px;
                            font-weight: 300;
                        }
                    }
                }
            }
          }
       }
    }
}